<template>
	<view class="order_assess_page">
		<view class="page_top">
			<!-- 评价选择 -->
			<view class="page_head">
				<view class="item" v-for="(item,index) in  page_head_data" :key='index' @click="choiseScore(item)">
					<img :src="submit_data.score==item.value?item.choise_img:item.img" />
					<view class="name" :class="submit_data.score==item.value?'active':''">
						{{item.name}}
					</view>
				</view>
			</view>
			<!-- 分割线 -->
			<view class="divider zj" v-if="type=='专家咨询'"></view>
			<view class="divider" v-else></view>
			<view class="keyword" v-if="type=='专家咨询'">
				<view class="item" :class="keyWords[index]?'active':''" v-for="(item,index) in keyword_data" :key='item' @click="choiseKeyWords(index)">
					{{item}}
				</view>
			</view>
			<!-- 评价内容 -->
			<textarea v-model="submit_data.notes" maxlength='100' class="send-textarea" placeholder-style="font-size:28rpx;color:rgba(168,168,168,1);"
			 :placeholder="type=='专家咨询'?'多个角度评价专家服务，可以帮助更多想咨询的人':'感觉怎么样，和大家分享一下吧'" />
			<!-- 匿名评价 -->
			<view class="page_choise">
			 	  <view class="checkbox" :class="submit_data.nameType==1?'active':''" @click="choiseNameType"><icon  type="success_no_circle" size='8' color='#fff'></icon></view><text  @click="choiseNameType">匿名评价</text>
			</view>
		</view>
		
		<!-- 页面底部 -->
		<view class="page_foot">
			<view class="submit_btn" @click="submit">
				提交
			</view>
			<view class="integral">
				提交好评，<text style="color: #DE5A02;">获得10积分</text>
				<image src="https://www.innovationgloble.com/wxs/img/wx/assess-integral.png" mode="widthFix"></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				page_head_data: [{
						img: 'https://www.innovationgloble.com/wxs/img/wx/assess-cry1.png',
						choise_img: 'https://www.innovationgloble.com/wxs/img/wx/assess-cry.png',
						value: 1,
						name: '差'
					}, {
						img: 'https://www.innovationgloble.com/wxs/img/wx/assess-sad1.png',
						choise_img: 'https://www.innovationgloble.com/wxs/img/wx/assess-sad.png',
						value: 2,
						name: '一般'
					},
					{
						img: 'https://www.innovationgloble.com/wxs/img/wx/assess-smile1.png',
						choise_img: 'https://www.innovationgloble.com/wxs/img/wx/assess-smile.png',
						value: 3,
						name: '不错'
					}, {
						img: 'https://www.innovationgloble.com/wxs/img/wx/assess-happy1.png',
						choise_img: 'https://www.innovationgloble.com/wxs/img/wx/assess-happy.png',
						value: 4,
						name: '满意'
					}, {
						img: 'https://www.innovationgloble.com/wxs/img/wx/assess-kiss1.png',
						choise_img: 'https://www.innovationgloble.com/wxs/img/wx/assess-kiss.png',
						value: 5,
						name: '超赞'
					}
				],
				keyword_data:['回复很及时','建议很有帮助','讲解很清晰','专业水平高','服务态度好'],
				keyWords:[],
				submit_data: {
				   "orderId":'',
				   "score":'',       
				   "nameType":0,
				   "keyWords":'', 
				   "notes":""
				},
				type :'', // 判断是否为专家咨询
			}
		},
		onLoad(options){
			console.log(options)
			this.submit_data.orderId = options.id
			this.type = options.type
		},
		methods:{
			choiseScore(data){
				this.submit_data.score = data.value
			},
			choiseKeyWords(data){
				this.$set(this.keyWords,data, this.keyWords[data]?false:true)
			},
			choiseNameType(){
				this.submit_data.nameType  = (this.submit_data.nameType==0?1:0)
			},
			
			submit(){
				let temp = []
				for(let k in this.keyWords){
					if(this.keyWords[k]){
						temp.push(this.keyword_data[k])
					}
				}
				this.submit_data.keyWords = temp.join(',')
				if(this.submit_data.score==''){
					uni.showToast({
					    title: '请选择评分',
					    duration: 2000,
						icon :'none'
					});
					return
				}
				if(this.submit_data.keyWords==''){
					uni.showToast({
					    title: '请选择关键字',
					    duration: 2000,
						icon :'none'
					});
					return
				}
				if(this.submit_data.notes==''){
					uni.showToast({
					    title: '请填写评价',
					    duration: 2000,
						icon :'none'
					});
					return
				}
				this.$request.post({
					url:'orderAppraise/add',
					data:this.submit_data
				}).then(res=>{				
						uni.navigateTo({
							url:'/pagesA/order-assess-success/order-assess-success?id='+res
						})
				})
			}
				
		}
		
	}
</script>

<style>
	page{
		height: 100%;
	}
	.order_assess_page {
		display: flex;
		flex-direction: column;
		min-height: 100%;
	}
	.order_assess_page .page_top{
		padding: 64upx;	
		flex:1;
		
	}
	.order_assess_page view{
		line-height: normal;
	}

	.order_assess_page .page_head {
		display: flex;
		align-items: center;
		justify-content: space-around;

	}

	.order_assess_page .page_head .item {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.order_assess_page .page_head .item img {
		width: 54upx;
		height: 54upx;
		display: inline-block;
		margin-bottom: 24upx;
	}

	.order_assess_page .page_head .item .name {
		font-size: 28upx;
		color: #333;
	}
	.order_assess_page .page_head .item .name.active {
		color:#DE5A02
	}
	

	.order_assess_page .divider {
		margin-top: 76upx;
		margin-bottom: 82upx;
		height: 1upx;
		background: #ebebeb;
		text-align: center;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.order_assess_page .divider::after {
		content: '评价一下吧';
		font-size: 26upx;
		color: #A3A3A3;
		position: absolute;
		background-color: #fff;
		padding: 26upx;
		
	}
	.order_assess_page .divider.zj::after {
		content: '夸夸专家吧';
		font-size: 26upx;
		color: #A3A3A3;
		position: absolute;
		background-color: #fff;
		padding: 26upx;
		
	}
	.order_assess_page .keyword{
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		
	}
	.order_assess_page .keyword .item{
		width:296upx;
		height:86upx;
		background:rgba(249,249,249,1);
		margin-bottom: 30upx;
		display: flex;
		justify-content: center;
		align-items: center;
		box-sizing: border-box;
	}
	
	.order_assess_page .keyword .item.active{
		width:296upx;
		height:86upx;
		box-sizing: border-box;
		background:rgba(243,247,255,1);
		border:1upx solid rgba(148,190,252,1);	
	}
	
	.order_assess_page textarea{
		width: 558upx;
		height: 282upx;
		border:1upx solid rgba(197,196,196,1);
		padding:24upx 32upx;
		font-size: 28upx;
		line-height: 44upx;
	}
	.order_assess_page .page_choise{
		display: flex;
		justify-content: flex-end;
		margin-top: 30upx;
		font-size: 28upx;
		color: #333;
		align-items: center;
	}

	.order_assess_page .page_choise .checkbox{
		display: flex;
		border:1upx solid rgba(197,196,196,1);
		width: 26upx;
		height: 26upx;
		margin-right: 10upx;
		line-height: 28upx;
		text-align: center;
	}
	
	.order_assess_page .page_choise .checkbox.active{
		display: inline-block;
		background-color: #008BFF;
		border: none;
		width: 28upx;
		height: 28upx;
	}
	.order_assess_page .page_foot{
		height: 250upx;	
	}
	.order_assess_page .page_foot .submit_btn{
		width:686upx;
		height:96upx;
		background:rgba(0,139,255,1);
		border-radius:6upx;
		margin-left: 32upx;
		font-size: 34upx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
	}
	.order_assess_page .page_foot .integral{
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 50upx;
	}
	.order_assess_page .page_foot .integral image {
		width: 90upx;
		display: inline-block;
	}
</style>
